<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除样式 */
        * {
            margin: 0;
            padding: 0;
        }
        .obj {
            width:150px;
            height: 100px;
            background-color: peru;
            /* 添加绑定动画 */
            animation: move 5s linear infinite;
        }
        /* 定义动画过程 */
        @keyframes move {
            /* 1 在原位 */
            0% {
                transform: translate(0);
            }
            /* 2 水平向右移动500px */
            25% {
                transform: translateX(500px);
            }
            /* 3 向下移动500px */
            50% {
                transform: translate(500px, 500px);
            }
            /* 4 向左移动500px */
            75% {
                transform: translateY(500px);
            }
            /* 5 向上移动500px回到原位 */
            100% {
                transform: translate(0);
            }
        }
    </style>
</head>
<body>
    <!-- 
        使用@keyframes和animation实现一个元素
        先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位
        5S完成动画并一直重复
    -->
    <!-- 元素在这 -->
    <div class="obj"></div>
</body>
</html>